<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="fr btn-group" id="ttt">
        <el-button-group>
          <el-button
            type="primary"
            size="mini"
            class="el-button-toolbar-mini"
            @click="createMenu()"
          >
            <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增
          </el-button>
          <el-button
            type="primary"
            size="mini"
            class="el-button-toolbar-mini"
            @click="batchDeleteMenu()"
          >
            <i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;批量删除
          </el-button>
        </el-button-group>
      </div>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input
            v-model="listQuery.roleId"
            placeholder="请输入"
            size="mini"
            style="width:100%"
            @keyup.enter.native="handleFilter"
          >
            <template slot="prepend">角色编码</template>
          </el-input>
        </el-col>
        <el-col :span="7">
          <el-input
            v-model="listQuery.userId"
            placeholder="请输入"
            size="mini"
            style="width:100%"
            @keyup.enter.native="handleFilter"
          >
            <template slot="prepend">用户名</template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            size="mini"
            class="el-button-toolbar-mini"
            @click="handleFilter"
            :disabled="visibleButton"
          >
            <i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询
          </el-button>
        </el-col>
      </el-row>
    </div>
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :max-height="tableHeight"
      :data="list"
      element-loading-text="loading"
      fit
      border
      stripe
      highlight-current-row
      @select-change="handleSelectChange"
      style="margin-top:10px"
    >
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
      <el-table-column label="用户名" property="userId"></el-table-column>
      <el-table-column label="姓名" property="userName"></el-table-column>
      <el-table-column label="角色编码" property="roleId"></el-table-column>
      <el-table-column label="角色名称" property="roleName"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <span class="operation-btn" @click="deleteMenu(row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="600px"
      :close-on-click-modal="modalClose"
    >
      <el-form
        ref="roleform"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="100px"
        size="mini"
      >
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userId">
          <el-input v-model="form.userId"></el-input>
        </el-form-item>
        <el-form-item label="角色编码" prop="roleId">
          <el-input v-model="form.roleId"></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="form.roleName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible=false">关闭</el-button>
        <el-button type="primary" size="mini" @click="menuSave()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { validLetters, validNumber } from "@/utils/validate";
// import { values } from 'mock/user';
export default {
  data() {
    const validMenuCode = (rule, value, callback) => {
      if (value == 0 || value == undefined) {
        callback();
      }
      //   else{
      //       queueMicrotask({funcCode:value}).then((res)=>{
      //          if(res.data.num==0 || this.dialogStatus=="edit"){
      //              callback
      //          }else{
      //              callback(new Error("菜单编码已存在，请重新输入"))
      //          }
      //       })
      //   }
    };
    return {
      listLoading: false,
      list: [
        {
          userId: "342134",
          userName: "黄xxx",
          roleId: "user",
          roleName: "普通用户",
        },
        {
          userId: "645315",
          userName: "李xxx",
          roleId: "admin",
          roleName: "管理员",
        },
      ],
      funcId: "",
      tableHeight:
        (window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight) -
        this.$store.state.settings.tagViewHeight -
        115,
      listQuery: {
        roleId: "",
        userId: "",
      },
      visibleButton: false,
      modalClose: false,
      multipleSelection: [],
      rowClickSelection: null,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        add: "菜单-新增",
        edit: "菜单-编辑",
        view: "菜单-查看",
      },
      //   dialogFormVisible: false,
      form: {
        userName: "",
        userId: "",
        roleId: "",
        roleName: "",
      },
      rules: {
           userId: [
          { required: true, message: "用户名名称必填", trigger: "blur" },
          { max: 120, message: "用户名长度不能超过120字符", trigger: "blur" },
        ],
         userName: [
          { required: true, message: "姓名必填", trigger: "blur" },
          { max: 120, message: "姓名不能超过120字符", trigger: "blur" },
        ],
        roleId: [
          { required: true, message: "角色编码名称必填", trigger: "blur" },
          { max: 120, message: "角色编码长度不能超过120字符", trigger: "blur" },
        ],
        roleName: [
          { required: true, message: "角色名称必填", trigger: "blur" },
          { max: 120, message: "角色名称长度不能超过120字符", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    //    tableHeight(val){
    //        if(!this.timer){
    //            this.tableHeight=val
    //            this.timer=true
    //            const that=this;
    //            setTimeout(function () {
    //                this.timer=false
    //            },(400))
    //        }
    //    }
  },
  //   created(){
  //       this.fetchData(this.listQuery)
  //   }
  mounted() {
    window.onresize = () => {
      return (() => {
        const tmp =
          window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight;
        this.tableHeight = tmp - this.$store.state.settings.tagViewHeight - 115;
      })();
    };
  },
  methods: {
    // fetchData(listQuery) {
    //   this.listLoading = true;
    //   this.visibleButton = true;
    //   query(listQuery).then((res) => {
    //     this.list = res.data;
    //     this.listLoading = false;
    //     this.visibleButton = false;
    //   });
    // },
    handleFilter() {
      // this.listQuery.currentPage=1
      // this.$refs.searchChild.initSeachValue()
    },
    resetMenu() {
      this.form = {
       userName: "",
        userId: "",
        roleId: "",
        roleName: "",
      };
    },
    createMenu() {
      this.resetMenu();
      this.dialogStatus = "add";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["roleform"].clearValidate();
      });
      if (this.rowClickSelection != null) {
        this.form.roleId = this.rowClickSelection.funcId;
        this.form.roleName = this.rowClickSelection.funName;
      }
    },
    editRole(row) {
      Object.keys(this.form).forEach((key) => {
        this.form[key] = row[key];
      });
      this.dialogStatus = "add";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["roleform"].clearValidate();
      });
      //   query({funcId:row.funcId}).then((res)=>{
      //       this.form=res.data
      //   })
    },
    deleteMenu(row) {
      this.$confirm("删除该行", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var ids = [];
        ids.push(row.funcId);
        // delect({ids:ids}).then(()=>{
        //     this.fetchData(this.listQuery)
        //     this.rowClickSelection=null
        //     this.$message({
        //         message:"删除成功",
        //         type:"成功"
        //     })
        // })
      });
    },
    batchDeleteMenu() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "至少选择一条",
          type: "info",
        });
        return;
      }
      var ids = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].roleId);
        if (
          null !== this.rowClickSelection &&
          this.rowClickSelection.funcId === this.multipleSelection[i].funcId
        ) {
          this.rowClickSelection = null;
        }
      }
      this.$confirm("删除该行", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // delect({ ids: ids }).then(() => {
        //   this.fetchData(this.listQuery);
        //   this.rowClickSelection = null;
        //   this.$message({
        //     message: "删除成功",
        //     type: "成功",
        //   });
        // });
      });
    },
    handleSelectChange(val) {
      this.multipleSelection = val;
    },
    handleRowlickChange(val) {
      this.rowClickSelection = val;
    },
    menuSave() {
      this.$refs["roleform"].validate((valid) => {
        if (valid) {
          this.createMenu(this.form).then(() => {
            this.dialogFormVisible = false;
            this.handleFilter();
            var msg = "添加成功";
            if ((this.dialogStatus = "edit")) {
              msg = "修改成功";
            }
            this.$message({
              message: msg,
              type: "success",
            });
          });
        }
      });
    },
    moreSearchShow() {
      this.$refs.searchPanel.toShow();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/btn.scss";
.fr {
  float: right;
}
.el-tag {
  height: 24px;
  line-height: 25px;
}
.filter-container {
  clear: both;
  overflow: hidden;
}
</style>
<style>
.el-table__expand-icon > .el-icon {
  margin: -8px 0 0 -8px;
}
.filter-container .el-row {
  width: 80%;
}
</style>